<template>
  <view style="padding-top: 30rpx; height:auto;margin-bottom: 90px;">
    <view v-for="(x) in historyTextList"
          :key="x.id">
      <view class="my-msg"
            v-if="x.content && x.role==='user'">
        <view class="">
          {{ x.content }}
        </view>
        <view>
          <image mode="aspectFill"
                 src="@/static/ai/my/avatar.png"
                 alt="" />
        </view>
      </view>
      <view class="gpt-msg"
            v-if="x.content && x.role==='assistant'">
        <view>
          <image mode="aspectFill"
                 src="@/static/ai/my/ai.png"
                 alt="" />
        </view>
        <view>
          <text>
            {{ x.content }}
          </text>
          <view>
            <view class="copy-btn"
                  @click="$util.copy(x.content)">
              <text class="iconfont icon-fuzhi"></text>复制
            </view>
            <!-- <view class="refresh-btn" @click="refsh(x)">
							<text class="iconfont icon-shuaxin"></text>刷新
						</view> -->
          </view>
        </view>
      </view>
    </view>
    <!-- <view v-show="sparkResult && loading">
      <view class="gpt-msg">
        <view>
          <image mode="aspectFill"
                 src="@/static/ai/my/ai.png"
                 alt="" />
        </view>
        <view>
          <view>
            <text> {{ sparkResult }}</text>
            <text :class="loading ? 'cursor' : ''"></text>
          </view>
          <view>
            <view class="copy-btn"
                  @click="$util.copy(x.content)">
              <text class="iconfont icon-fuzhi"></text>复制
            </view>
          </view>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  name: "ChatList",
  components: {},
  created () { },
  props: {
    type: {
      default: 'chat',
      type: String
    },
    historyTextList: {
      default: [],
      type: Array
    },

    loading: {
      default: false,
      type: Boolean
    },
    sparkResult: {
      default: '',
      type: String
    }
  },
  data () {
    return {
      userAvatar: '',
    }
  },
  methods: {
    refsh (d) {
      this.$emit('refsh', d)
    }
  }
}
</script>

<style lang="scss" scoped>
.gpt-time {
  text-align: center;
  font-size: 24rpx;
  margin-bottom: 25rpx;
  margin-top: 30rpx;
}

.my-msg {
  padding-right: 20rpx;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30rpx;

  & > view {
    &:nth-child(1) {
      max-width: 562rpx;
      background: #577bed;
      border-radius: 30rpx 0 30rpx 30rpx;
      color: #fff;
      padding: 20rpx 20rpx 20rpx 30rpx;
    }

    &:nth-child(2) {
      width: 60rpx;
      height: 60rpx;
      margin-left: 16rpx;

      image {
        border-radius: 50%;
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
}

.gpt-msg {
  padding-left: 20rpx;
  display: flex;
  margin-bottom: 30rpx;

  & > view {
    &:nth-child(2) {
      max-width: 562rpx;
      background: #fff;
      border-radius: 0 30rpx 30rpx 30rpx;
      padding: 20rpx 27rpx 30rpx 30rpx;

      & > view {
        &:nth-child(2) {
          display: flex;
          justify-content: flex-end;
          padding-top: 30rpx;

          .copy-btn {
            color: #567aed;
          }

          .refresh-btn {
            color: #fab62e;
            margin-left: 30rpx;
          }

          & > view {
            display: flex;
            align-items: center;

            text {
              margin-right: 8rpx;
            }
          }
        }
      }
    }

    &:nth-child(1) {
      width: 60rpx;
      height: 60rpx;
      margin-right: 16rpx;

      image {
        border-radius: 50%;
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
}

.mj-btns {
  & > view {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    & > view {
      padding-left: 20rpx;
      padding-right: 20rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      background: #4e5058;
      border-radius: 8rpx;
      cursor: pointer;
    }
  }
}

.chat-gpt-img {
  max-width: 100%;
}

.cursor {
  border-right: 6px solid transparent;
  animation: text 3.5s steps(15, end), blink-caret 0.75s step-end infinite;
}
</style>